import Base from "./base";
import Constant from "../constant";
import {GET_AGREEMENT} from "../utils/network";

/**
 * 弹窗式
 */
export default class Modal extends Base {
    constructor({agreementNo, title, version, options, onStart, onConfirm, onClose, onError}) {
        super(agreementNo, title, version, options,"modal", onStart, onConfirm, onClose, onError);
        this.agreementNo = agreementNo;
        this.version = version;
        this.onStart = onStart;
        this.onConfirm = onConfirm;
        this.onClose = onClose;
        this.onError = onError;
    }

    start() {
        this.initDom();
        this.openModal();
        this.initModalEvent();
        this.initConfirmEvent();
        this.startCountdown();
        typeof this.onStart === "function" && this.onStart();
    }

    initDom() {
        const modalContentElement = document.getElementsByClassName("sdk__agreement_modal_content")[0];
        modalContentElement.append(this.initHeader());
        modalContentElement.append(this.initBody());
        modalContentElement.append(this.initFooter());
    }

    initHeader() {
        const header = document.createElement("div");
        header.setAttribute("class", "sdk__css_modal_header");
        const hElement = document.createElement("h4");
        hElement.innerHTML=this.title;
        hElement.style.color = this.titleColor;
        header.append(hElement);
        return header;
    }

    initBody() {
        const body = document.createElement("div");
        body.setAttribute("class", "sdk__css_modal_body");
        const iframeElement = document.createElement("iframe");
        iframeElement.setAttribute("id", "sdk__css_modal_body_iframe");
        const data = {
            agreementNo: this.agreementNo,
            version: this.version
        };
        // alert('modal'+JSON.stringify(data));
        // 加载框
        this.loading = document.createElement("div");
        this.loading.setAttribute("class","sdk__loader");
        body.append(this.loading);
        // const contentDocument = iframeElement.contentDocument || (iframeElement.contentWindow && iframeElement.contentWindow.document);
        GET_AGREEMENT(ENV_CONFIG.REQUEST_ADDRESS, Constant.GET_AGREEMENT, data, this.timeout).then((resp) => {
            // contentDocument.open();
            // contentDocument.write(resp);
            // contentDocument.close();
            iframeElement.srcdoc = resp;
            this.loading.remove();
        }, (error) => {
            // contentDocument.open();
            // contentDocument.write(super.initErrorTips());
            // contentDocument.close();
            iframeElement.srcdoc = super.initErrorTips();
            this.loading.remove();
            typeof this.onError === "function" && this.onError();
        });
        body.append(iframeElement);
        return body;
    }

    initFooter() {
        const footer = document.createElement("div");
        footer.setAttribute("class", "sdk__css_modal_footer");
        this.buttonElement = document.createElement("button");
        this.buttonElement.setAttribute("id", "sdk__css_modal_confirm_button");
        this.buttonElement.setAttribute("class", "sdk__css_modal_button sdk__css_modal_confirm_button");
        if(this.forceRead) {
            this.buttonElement.innerHTML = this.confirmText+"("+ this.forceReadTime +"秒)";
            this.buttonElement.style.background = "#7ea3f1";
            this.buttonElement.disabled = true;
        } else {
            this.buttonElement.innerHTML = this.confirmText;
            this.buttonElement.style.background = this.confirmBackGroundColor;
        }
        this.buttonElement.style.color = this.confirmTextColor;
        const cancelbuttonElement = document.createElement("button");
        cancelbuttonElement.setAttribute("id", "sdk__css_cancel_button_id");
        cancelbuttonElement.setAttribute("class", "sdk__css_modal_button sdk__css_modal_cancel_button");
        cancelbuttonElement.innerHTML=this.cancelText;
        cancelbuttonElement.style.background = this.cancelBackGroundColor;
        cancelbuttonElement.style.color = this.cancelTextColor;
        footer.append(cancelbuttonElement);
        footer.append(this.buttonElement);
        return footer;
    }

    initModalEvent() {
        const close = document.getElementById("sdk__css_cancel_button_id");
        close.addEventListener("click",  () => {
            this.closeModal();
        });
    }

    initConfirmEvent() {
        this.buttonElement.addEventListener("click",  () => {
            this.closeModal();
            this.confirm();
        });
    }

    /**
     * 打开模态框
     */
    openModal() {
        this.modal = document.getElementById("sdk__agreementSdk");
        this.modalContent = document.getElementById("sdk__agreementModalContent");
        this.modalContent.style.display = "block";
        this.modal.style.display = "block";
        this.modalContent.style.animation = "modal-show 0.3s";
    }

    closeModal() {
        this.modalContent.style.animation = "modal-hide 0.3s";
        this.modalContent.addEventListener("animationend", () => {
            this.modalContent.style.display = "none";
            this.modal.style.display = "none";
            typeof this.onClose === "function" && this.onClose();
            this.dispose();
        }, { once: true });
    }

    startCountdown() {
        if(this.forceRead) {
            const updateDisplay = () => {
                if (this.forceReadTime > 0) {
                    // 再次调用自身，持续更新倒计时显示
                    this.buttonElement.innerHTML = this.confirmText+"("+ this.forceReadTime +"秒)";
                    // 将倒计时减少1
                    this.forceReadTime--;
                    return;
                }
                clearInterval(intervalHandle);
                this.buttonElement.innerHTML = this.confirmText;
                this.buttonElement.style.background = this.confirmBackGroundColor;
                this.buttonElement.disabled = false;
            }
            // 每隔1秒更新倒计时显示
            const intervalHandle = setInterval(updateDisplay, 1000);
        }
    }


    /**
     * 点击确认框
     */
    confirm() {
        typeof this.onConfirm === "function" && this.onConfirm();
        this.sign();
    }

    /**
     * 释放
     */
    dispose() {
        super.dispose();
        this.modal.remove();
    }
}